<template>
    <view class="container" :style="themeColor">
        <view class="item-wrapper">
            <view class="item" v-for="item in subList" :key="item.LoginName">
                <view class="left-content">
                    <view>{{ item.LoginName }}</view>
                    <view class="account">{{ item.LoginAccount }}</view>
                </view>
                <text class="iconfont icon-bianji" @click="editAccount(item)"></text>
                <view class="line"></view>
            </view>
        </view>
        <view class="bottom">
            <view class="add-btn" @click="addAccount">新增子账号</view>
        </view>
    </view>
</template>

<script>
import { GetUserLoginAccountList } from "@/service/api/member.js"
export default {
    data() {
        return {
            subList: [],
        }
    },
    mounted() {
        this.getSubList()
    },
    methods: {
        async getSubList() {
            const res = await GetUserLoginAccountList()
            this.subList = res.Data
        },
        addAccount() {
            this.goToNewSubPage("/pages_me/packet/add-account/add-account")
        },
        editAccount(item) {
            this.goToNewSubPage(
                `/pages_me/packet/edit-account/edit-account?loginAccount=${item.LoginAccount}&loginName=${item.LoginName}`,
            )
        },
        goToNewSubPage(url) {
            uni.navigateTo({
                url,
                events: {
                    refreshSubList: () => {
                        this.getSubList()
                    },
                },
            })
        },
    },
}
</script>

<style lang="scss">
.container {
    display: flex;
    flex-direction: column;
    height: 100vh;

    .item-wrapper {
        flex: 1;
        overflow: hidden;
        overflow-y: auto;

        .item {
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 2 * $size-56;
            margin-bottom: 24rpx;
            padding: 34rpx 24rpx 34rpx 32rpx;
            background: $color-white;
            box-sizing: border-box;

            .line {
                width: 750rpx;
                height: 1rpx;
                background: $uni-border-bottom-color;
                position: absolute;
                bottom: 0;
                left: 32rpx;
            }

            .left-content {
                display: flex;
                color: $color-gray-1;

                .account {
                    margin-left: 16rpx;
                }
            }

            .icon-bianji {
                color: $color-blue;
                font-size: $size-40;
            }
        }
    }

    .bottom {
        height: 120rpx;
        padding: 16rpx 30rpx;
        box-sizing: border-box;
        box-shadow: 0rpx -4rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);

        .add-btn {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            background-color: $app-color-main;
            color: $color-white;
            border-radius: $size-56;
        }
    }
}
</style>
